<!DOCTYPE html>
<!--[if IE 9]>         <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <title>数字币对冲平台|BDS虚拟币对冲平台</title>
<#include "static/top.ftl" >

</head>
<body>
<!-- Page Wrapper -->
<!-- In the PHP version you can set the following options from inc/config file -->
<!--
    Available classes:

    'page-loading'      enables page preloader
-->
<div id="page-wrapper" class="page-loading">
    <!-- Preloader -->
    <!-- Preloader functionality (initialized in js/app.js) - pageLoading() -->
    <!-- Used only if page preloader enabled from inc/config (PHP version) or the class 'page-loading' is added in #page-wrapper element (HTML version) -->
    <div class="preloader">
        <div class="inner">
            <!-- Animation spinner for all modern browsers -->
            <div class="preloader-spinner themed-background hidden-lt-ie10"></div>

            <!-- Text for IE9 -->
            <h3 class="text-primary visible-lt-ie10"><strong>Loading..</strong></h3>
        </div>
    </div>

    <div id="page-container" class="header-fixed-top sidebar-visible-lg-full sidebar-light">
        <!-- Alternative Sidebar -->

        <!-- END Alternative Sidebar -->

        <!-- Main Sidebar -->



    <#include "static/menu.ftl" >


        <!-- END Main Sidebar -->

        <!-- Main Container -->
        <div id="main-container">
            <!-- Header -->



        <#include "static/header.ftl" >
            <!-- END Header -->

            <!-- Page content -->
            <div id="page-content">


                <div class="content-header">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="header-section">
                                <h1>Dashboard</h1>
                            </div>
                        </div>
                        <div class="col-sm-6 hidden-xs">
                            <div class="header-section">
                                <ul class="breadcrumb breadcrumb-top">

                                    <li>Dashboard</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="block full">
                        <div class="block-title">
                            <h2>实时行情</h2>
                        <#--一级目录-->
                            <ul class="nav nav-tabs" data-toggle="tabs">
                                <li class="active"><a href="#usdt">USDT</a></li>
                                <li><a href="#btc">BTC</a></li>
                                <li><a href="#eth">ETH</a></li>
                                <li><a href="#usd">USD</a></li>
                            </ul>
                        </div>

                        <div class="tab-content">
                        <#-- 二级目录-->
                            <div class="tab-pane active" id="usdt">
                                <ul class="nav nav-tabs" data-toggle="tabs">
                                    <li class="active"><a href="#btc_usdt">BTC/USDT</a></li>
                                    <li><a href="#ltc_usdt">LTC/USDT</a></li>
                                    <li><a href="#eth_usdt">ETH/USDT</a></li>
                                    <li><a href="#xrp_usdt">XRP/USDT</a></li>
                                </ul>
                                <div class="tab-content">
                                <#--usdt tab-->
                                    <div class="tab-pane active" id="btc_usdt">
                                        <table class="table table-striped">
                                            <thead>
                                           		<script src="/ftl/tbheader.js"  ></script>
                                            </thead>
                                            <tbody id="tb_btc_usdt">
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="tab-pane" id="ltc_usdt">
                                        <table class="table table-striped">
                                            <thead>
                                            <script src="/ftl/tbheader.js"  ></script>
                                            </thead>
                                            <tbody id="tb_ltc_usdt">
                                            </tbody>
                                        </table>
                                    </div>


                                    <div class="tab-pane" id="eth_usdt">
                                        <table class="table table-striped">
                                            <thead>
                                            <script src="/ftl/tbheader.js"  ></script>
                                            </thead>
                                            <tbody id="tb_eth_usdt">
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="tab-pane" id="xrp_usdt">
                                        <table class="table table-striped">
                                            <thead>
                                            <script src="/ftl/tbheader.js"  ></script>
                                            </thead>
                                            <tbody id="tb_xrp_usdt">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="btc">
                                <ul class="nav nav-tabs" data-toggle="tabs">
                                    <li class="active"><a href="#ltc_btc">LTC/BTC</a></li>
                                    <li><a href="#eth_btc">ETH/BTC</a></li>
                                    <li><a href="#xrp_btc">XRP/BTC</a></li>
                                </ul>
                                <div class="tab-content">
                                <#--btc tab-->
                                    <div class="tab-pane active" id="ltc_btc">
                                        <table class="table table-striped">
                                            <thead>
                                            <script src="/ftl/tbheader.js"  ></script>
                                            </thead>
                                            <tbody id="tb_ltc_btc">
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="tab-pane" id="eth_btc">
                                        <table class="table table-striped">
                                            <thead>
                                            <script src="/ftl/tbheader.js"  ></script>
                                            </thead>
                                            <tbody id="tb_eth_btc">
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="tab-pane" id="xrp_btc">
                                        <table class="table table-striped">
                                            <thead>
                                            <script src="/ftl/tbheader.js"  ></script>
                                            </thead>
                                            <tbody id="tb_xrp_btc">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="eth">
                                <ul class="nav nav-tabs" data-toggle="tabs">
                                    <li class="active"><a href="#btc_eth">BTC/ETH</a></li>
                                    <li><a href="#ltc_eth">LTC/ETH</a></li>
                                    <li><a href="#xrp_eth">XRP/ETH</a></li>
                                </ul>
                                <div class="tab-content">
                                <#--eth tab-->
                                    <div class="tab-pane active" id="btc_eth">
                                        <table class="table table-striped">
                                            <thead>
                                            <script src="/ftl/tbheader.js"  ></script>
                                            </thead>
                                            <tbody id="tb_btc_eth">
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="tab-pane" id="ltc_eth">
                                        <table class="table table-striped">
                                            <thead>
                                            <script src="/ftl/tbheader.js"  ></script>
                                            </thead>
                                            <tbody id="tb_ltc_eth">
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="tab-pane" id="xrp_eth">
                                        <table class="table table-striped">
                                            <thead>
                                            <script src="/ftl/tbheader.js"  ></script>
                                            </thead>
                                            <tbody id="tb_xrp_eth">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="usd">
                                <ul class="nav nav-tabs" data-toggle="tabs">
                                    <li class="active"><a href="#btc_usd">BTC/USD</a></li>
                                    <li><a href="#ltc_usd">LTC/USD</a></li>
                                    <li><a href="#eth_usd">ETH/USD</a></li>
                                    <li><a href="#xrp_usd">XRP/USD</a></li>
                                </ul>
                                <div class="tab-content">
                                <#--usd tab-->
                                    <div class="tab-pane active" id="btc_usd">
                                        <table class="table table-striped">
                                            <thead>
                                            <script src="/ftl/tbheader.js" ></script>
                                            </thead>
                                            <tbody id="tb_btc_usd">
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="tab-pane" id="ltc_usd">
                                        <table class="table table-striped">
                                            <thead>
                                            <script src="/ftl/tbheader.js"  ></script>
                                            </thead>
                                            <tbody id="tb_ltc_usd">
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="tab-pane" id="eth_usd">
                                        <table class="table table-striped">
                                            <thead>
                                            <script src="/ftl/tbheader.js"  ></script>
                                            </thead>
                                            <tbody id="tb_eth_usd">
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="tab-pane" id="xrp_usd">
                                        <table class="table table-striped">
                                            <thead>
                                            <script src="/ftl/tbheader.js"  ></script>
                                            </thead>
                                            <tbody id="tb_xrp_usd">
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>
                            <div>



                            </div>
                        </div>
                        <!-- END First Row -->

                        <!-- Second Row -->
                    </div>
                    <!-- END Page Content -->
                </div>
                <!-- END Main Container -->
            </div>
            <!-- END Page Container -->
        </div>
        <!-- END Page Wrapper -->




        <script>

            $(function () {
                $("form").on('submit', function (e) {
                    e.preventDefault();
                });
                connect();

                $.get("/exchange/init", function (data) {
                    console.log(data);
                    init_exchange(data);
                });
            });
        
            function init_exchange(data) {
                if(data.code=='200'){
                    var list = data.data;
                    for(var i=0;i<list.length;i++){
                        var message = list[i];
                        var pair=message.pair;
                        var exg=message.exchange;
                        var count=$("tr#"+pair+"_"+exg).length;
                        var html="";
                        if (count==0) {
                            html +="<tr id="+pair+"_"+exg+"><td>" + message.exchange + "</td>"
                                    + "<td id="+pair+"_"+exg+"_last>" + message.last + "</td>"
                                    + "<td id="+pair+"_"+exg+"_high>" + message.high + "</td>"
                                    + "<td id="+pair+"_"+exg+"_low>" + message.low + "</td>"
                                    + "<td id="+pair+"_"+exg+"_buy>" + message.buy + "</td>"
                                    + "<td id="+pair+"_"+exg+"_sell>" + message.sell + "</td>"
                                    + "<td id="+pair+"_"+exg+"_vol>" + message.vol + "</td>"
                                    + "<td id="+pair+"_"+exg+"_timestamp>" + message.timestamp + "</td>"
                                    + "<td><button id="+pair+"_"+exg+"_trade class='btn btn-default'>交易</button></td></tr>";
                            $("#tb_"+pair).append(html);
                        }
                    }
                }
            }
        
            //        var socketjs_url="http://localhost:8089/market_info"
            var socketjs_url="http://${wsurl}"

            var stompClient = null;

            function connect() {
                var socket = new SockJS(socketjs_url);
                stompClient = Stomp.over(socket);
                stompClient.connect({}, function (frame) {
                    console.log('Connected: ' + frame);
                    stompClient.subscribe('/topic/okcoin/marketInfo', function (greeting) {
                        showMarketInfo(JSON.parse(greeting.body),'okcoin');
                    });

                    stompClient.subscribe('/topic/gateio/marketInfo', function (greeting) {
                        showMarketInfo(JSON.parse(greeting.body),'gateio');
                    });

                    stompClient.subscribe('/topic/huobi/marketInfo', function (data) {
                        showMarketInfo(JSON.parse(data.body),'huobi');
                    });

                    stompClient.subscribe('/topic/okex/marketInfo', function (data) {
                        showMarketInfo(JSON.parse(data.body),'okex');
                    });

                    stompClient.subscribe('/topic/zb/marketInfo', function (data) {
                        showMarketInfo(JSON.parse(data.body),'zb');
                    });

                    stompClient.subscribe('/topic/bitstamp/marketInfo', function (greeting) {
                        showMarketInfo(JSON.parse(greeting.body),'bitstamp');
                    });

                });
            }


            function disconnect() {
                if (stompClient !== null) {
                    stompClient.disconnect();
                }
                setConnected(false);
                console.log("Disconnected");
            }


            function showMarketInfo(data,exg) {
                if(data.code==200){
                    var list = data.data;
                    for(var i=0;i<list.length;i++){
                        var message = list[i];
                        var pair=message.pair;
                        var count=$("tr#"+pair+"_"+exg).length;
                        var html="";
                        if (count==0) {
                            html +="<tr id="+pair+"_"+exg+"><td>" + message.exchange + "</td>"
                                    + "<td id="+pair+"_"+exg+"_last>" + message.last + "</td>"
                                    + "<td id="+pair+"_"+exg+"_high>" + message.high + "</td>"
                                    + "<td id="+pair+"_"+exg+"_low>" + message.low + "</td>"
                                    + "<td id="+pair+"_"+exg+"_buy>" + message.buy + "</td>"
                                    + "<td id="+pair+"_"+exg+"_sell>" + message.sell + "</td>"
                                    + "<td id="+pair+"_"+exg+"_vol>" + message.vol + "</td>"
                                    + "<td id="+pair+"_"+exg+"_timestamp>" + message.timestamp + "</td></tr>";
                            $("#tb_"+pair).append(html);
                        }else{
                            $("#"+pair+"_"+exg+"_last").text(message.last);
                            $("#"+pair+"_"+exg+"_high").text(message.high);
                            $("#"+pair+"_"+exg+"_low").text(message.low);
                            $("#"+pair+"_"+exg+"_buy").text(message.buy);
                            $("#"+pair+"_"+exg+"_sell").text(message.sell);
                            $("#"+pair+"_"+exg+"_vol").text(message.vol);
                            $("#"+pair+"_"+exg+"_timestamp").text(message.timestamp);
                        }
                    }
                }

            }




            $("#usdt_li").click(function () {
                location.href = "#btc_usdt";
            })
        </script>
</body>
</html>